<template>
  <Dialog title="参与活动" v-model="visible" top="10vh">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
      <el-form-item label="附件" prop="fileUrls">
        <UploadFile
          v-model="formData.fileUrls"
          :file-type="['docx', 'pdf', 'jpg', 'png', 'jpeg', 'mp4']"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ActivityApi } from '@/api/school/activity'
const props = defineProps<{
  modelValue: boolean
  activityId?: number // 活动ID（主表的关联字段）
}>()
const emit = defineEmits(['update:modelValue', 'success'])
const visible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const message = useMessage() // 消息弹窗
const formLoading = ref(false)
const formData: any = ref({
  fileUrls: []
})
const formRules = reactive({
  fileUrls: [{ required: true, message: '参与文件不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const res = await ActivityApi.createActivityRecord({
      activityId: props.activityId,
      fileUrls: formData.value.fileUrls
    })
    if (res) {
      visible.value = false
      message.success('参与成功')
      emit('success')
    }
  } catch (error) {
  } finally {
    formLoading.value = false
  }
}
</script>
